<template>
	<image src="../../../static/image/me/join-bg.png" mode="widthFix" style="width: 100%;position: relative;"></image>
	<view @click="returnTo" style="position: absolute;margin-top:-100px;z-index: 9;"><uni-icons type="left" size="30"
			color="#ffffff"></uni-icons></view>
	<view
		style="width: 100%;min-height: 500px; background-color:#fff;margin-top: -20px;border-radius:10px 10px 0px 0px; position: absolute;">
		<view style="width: 100%;padding: 20px;">
			<view style="display: flex;justify-content: center;">
				<image :src="imgURL3+'me/me/penpor.png'" style="width: 30px;height: 30px;"></image>
				<view style="margin: 5px;">志愿申请</view>
			</view>
			<uni-forms ref="formRole" :modelValue="formData" :rules="rules" label-position="top">

				<uni-forms-item label="个人姓名" name="name" :required='true'>
					<view style="width: 100%;height: 30px;border-bottom: 1px solid #FBD2D6; ">
						<input style="" v-model="formData.name" class="input" type="text" placeholder="请输入个人姓名" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="网格" name="gridId" :required='true'>
					<view style="width: 100%;border-bottom: 1px solid #FBD2D6; padding-bottom: 10px;">
						<view v-if="isApply">
							<view v-for="item in formData.teamList">{{item}}</view>
						</view>
						<ba-tree-picker v-else ref="treePicker" :multiple="false" @select-change="selectChange"
							title="请选择网格" :localdata="site_list" valueKey="value" textKey="label" childrenKey="children"
							:selectParent="false" :isGrid="true" />
					</view>
				</uni-forms-item>
			</uni-forms>

		</view>
	</view>

	<view style="width: 100%;display: flex; justify-content: center;bottom: 3%; position: fixed;" class="">
		<view class="return-text" @click="returnTo">
			返回
		</view>
		<view v-if="rolestore === null" class="empower-text" @click="getform">
			确定
		</view>
		<view v-if="rolestore === 0" class="empower-text">待审核中</view>
	</view>

	<loading></loading>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { volunteer } from '../../../api/myhome/login';
	import { joinMe, teamlist } from '../../../api/myhome/login';
	import { onLoad, onReady } from "@dcloudio/uni-app"
	import { imgURL3 } from "../../../api/request"
	import { getTeamInfo, getTreeInfo, getRegion } from '../../../api/team/team';

	//判断是否申请过
	const isApply = ref(false)

	onLoad(() => {
		//获取网格
		get_teamList()
		volunteer().then(res => {
			console.log('xx', res.data)
			if (res.data != null) {
				//判断是否申请过
				isApply.value = true

				formData.name = res.data.realName
				formData.gridId = res.data.realName
				// formData.phone = res.data.phone
				// formData.workstate = res.data.company
				// formData.Contactaddress = res.data.contactAddress
				// formData.illustrate = res.data.joinDescription
				// formData.landscape = res.data.politicalIdentityId
				// formData.workHour = res.data.workHours
				// formData.sex = res.data.sex,
				// 	formData.age = res.data.birthDate,
				formData.teamList = res.data.teamList
				formData.teamList = formData.teamList.map(item => (
					// item.teamId
					item.teamName
				))
				console.log(formData.teamList)
				formData.forte = res.data.forte
				rolestore.value = res.data.status
			} else {
				formData.phone = uni.getStorageSync('phone')
			}
		})
	})
	let rolestore = ref(null);
	// const team = ref([])
	// 定义表单数据和规则
	const formData = reactive({
		name: '',
		gridId: null,
		gridName: null
		// phone: '',
		// workstate: '',
		// Contactaddress: '',
		// illustrate: '',
		// landscape: null,
		// teamList: [],
		// age: '',
		// sex: null,
		// forte: '',
		// workHour: '0'
	});

	const rules = ref({
		name: {
			rules: [{ required: true, errorMessage: '请填写姓名' }],
			label: '姓名',
			validateTrigger: 'submit'
		},
		gridId: {
			rules: [{ required: true, errorMessage: '请选择网格' }],
			label: '网格',
			validateTrigger: 'submit'
		},
	});

	// 表单引用
	const formRole = ref(null);

	//站点列表
	const site_list = ref([])
	//拿到选择的志愿者队伍
	let team_list = reactive([])

	//获取站点列表
	const get_teamList = () => {
		getRegion(0).then(res => {
			site_list.value = res
			console.log('111111111110', res)
		})
	}
	const treePicker = ref(null)

	//监听选择（ids为数组）
	const selectChange = (list) => {
		team_list = JSON.parse(JSON.stringify(list))
		console.log('11', list)
		if (team_list.length > 0) {
			formData.gridId = team_list[0].id
			formData.gridName = team_list[0].name
		} else {
			formData.gridId = null
			formData.gridName = null
		}
	}

	// 获取表单数据
	const getform = () => {
		formRole.value.validate().then(async ({ valid, errors } : any) => {
			if (valid) {
			} else {
				let token = uni.getStorageSync("token")
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: "error"
					})
				} else {
					//验证成功
					joinMe({
						realName: formData.name,
						gridId: formData.gridId
					}).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: '申请提交成功',
								icon: "success"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/me/me'
								})
							}, 1000)
						}
					})
				}
			}
		})
	}
	
	// 返回到其他页面
	const returnTo = () => {
		uni.switchTab({
			url: '/pages/me/me'
		});
	}
</script>

<style>
	.empower-text {
		height: 40px;
		width: 55%;
		margin-left: 3%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.return-text {
		height: 40px;
		width: 30%;
		border-radius: 5px;
		background-color: rgba(243, 118, 128, 0.51);
		text-align: center;
		color: #EE3F4D;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.agree-text {
		height: 36px;
		width: 40%;
		margin-left: 8%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.disagree-text {
		height: 36px;
		width: 40%;
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		color: #EE3F4D;
		border: 1px solid #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}
</style>